Artigos HTML e CSS Filtrando listas HTML com jQuery

Introdução

Sabemos que a principal forma de listagem de dados detalhados em páginas web é usando tabelas, e é este a real função desse tipo de elemento. Porém, devemos estar prontos para lidar com diversos tipos de situações que surgem em nosso dia-a-dia e saber aproveitar todos os recursos das ferramentas de que dispomos para atingir o resultado desejado.

Em páginas web para dispositivos móveis, por exemplo, é comum encontrarmos dados sendo exibidos em listas <UL> e <OL>, portanto, é preciso saber como manipular essas estruturas, a fim de se adequar às novas tendências do desenvolvimento web.

Muitas vezes são apresentadas, para o usuário, grandes quantidades de dados que este precisa filtrar para localizar somente a informação desejada. Em algumas situações, para evitar o envio de várias requisições seguidas para o servidor, com o intuito de realizar uma pesquisa no banco de dados e retornar apenas os registros pesquisados, pode ser interessante realizar esse filtro diretamente no lado do cliente. Isso implica em utilizar tecnologias front-end, ou seja, HTML, CSS e Javascript para filtrar as informações diretamente na página, considerando que há uma lista extensa exibida.

Neste artigo será apresentada uma solução simples, de fácil compreensão e implementação para filtrar uma lista <UL> (também aplicável a <OL>) utilizando Javascript, mais especificamente usando a biblioteca jQuery.

O código HTML

Como o objetivo aqui é enfatizar no filtro realizado sobre uma lista, não serão abordados detalhes de design ou acesso a bases de dados. Apenas será utilizada uma estrutura HTML básica, sobre a qual será aplicada uma simples folha de estilo apenas para dar à página um visual mais “agradável”.

Listagem 1: Código HTML da página

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
	<meta charset="UTF-8"/>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<style>
	*{
		font-family:"Century Gothic", Arial;
		font-size:20px
	}
	input[type="text"]{
		width:100%;
		border:solid 1px
	}
	
	ul{
		padding:0;;
		margin:0
	}
	
	ul li{
		list-style:none;
		border:dashed 1px;
		padding:5px
	}
	</style>
</head>
<body>
	Filtrar lista:<br/>
	<input type="text" id="txtBusca" placeholder="Digite aqui um valor para filtrar..."/>
	<ul id="ulItens">
		<li>Feijão</li>
		<li>Arroz</li>
		<li>Farinha</li>
		<li>Açúcar</li>
		<li>Macarrão</li>
	</ul>
</body>
</html>

Salvando o conteúdo da Listagem 1 em arquivo de extensão .html, obtemos o resultado apresentado na figura a seguir.

Página aberta no browser

Figura 1: Página aberta no browser

O código Javascript (jQuery)

Tendo montado a estrutura, o próximo passo é implementar o código Javascript, utilizando a sintaxe jQuery.

Observação: é importante obervar que foi feita referência à biblioteca jQuery no cabeçalho do arquivo HTML. Essa referência (tag na quinta linha) é necessária para que possamos utilizar as funções dessa biblioteca no restante do código.

O código da Listagem 2, a seguir, é o responsável por implementar o filtro sobre a lista “ulItens”. Ele deve ser inserido abaixo da tag que faz referência à biblioteca jQuery.

Listagem 2: Código Javascript para implementar o filtro

<script type="text/javascript">
$(function(){
	$("#txtBusca").keyup(function(){
		var texto = $(this).val();
		
		$("#ulItens li").css("display", "block");
		$("#ulItens li").each(function(){
			if($(this).text().indexOf(texto) < 0)
			   $(this).css("display", "none");
		});
	});
});
</script>

Abaixo têm-se uma explicação detalhada de cada linha do código acima, visando facilitar o entendimento do leitor.

Linhas 1 e 13: abertura e fechamento da tag <script> que contém o código Javascript a ser interpretado no momento do carregamento da página. Diferente da referência à jQuery, nesse caso não foi necessário definir o atributo “src”, pois o conteúdo não encontra-se em um arquivo externo, mas sim dentro das próprias tags.

Linhas 2 e 12: abertura e fechamento da função geral da jQuery, que trata o evento ready do documento. Este evento é um “substituto” do tradicional load da linguagem Javascript. O ready, porém, é executado só após o DOM ter sido inteiramente carregado, evitando erros que comumente ocorrem devido aos elementos não terem sido totalmente carregados quando o script é executado. Para maiores informações sobre o ready, é indicado acessar a documentação oficial no link http://api.jquery.com/ready/.

Linhas 3 e 11: abertura e fechamento da função que tratará o evento keyup do input onde se digitará o valor a ser usado como filtro. Esse evento foi utilizado para que o filtro seja feito sempre que uma tecla for pressionada e solta. Dessa forma, mesmo após ter sido digitada apenas um caracter, ao soltar a tecla o filtro será realizado.

Linha 4: nessa linha se obtém o valor digitado no input e o atribui a uma variável chamada “texto”, para ser usada posteriormente. Nesse nível, o operador “this” refere-se ao próprio input que está disparando o evento. A função val() é a responsável por recuperar o valor digitado na caixa de texto e está contida na biblioteca jQuery.

Linha 6: a propriedade CSS display de todos os itens (<li>) da lista seja alterada para “block”. Com isso, todos os itens tornam-se visíveis.

Linhas 7 e 10: abertura e fechamento da função que tratará cada item da lista, quando esta for percorrida para que se realize o filtro. A função each da jQuery dá acesso a todos os elementos de uma lista (lista de elementos, não necessariamente UL ou OL).

Linha 8: nessa linha verifica-se se o item da lista acessado na iteração atual da função each contém o texto digitado no input. Agora o operador this refere-se ao item (<li>) e não mais ao input, pois a função each é mais interna que a função keyup. Nesse caso foi utilizada a função text() para acessar o texto do item, e não a val(), pois esta é usada para valor inseridos em elementos de formulário como inputs e checkboxes. A função indexOf retorna -1 se o texto for localizado ou um valor maior indicando a posição do texto buscado no conteúdo do item, caso seja localizado. É de nosso interesse, nessa situação, verificar se o texto NÃO foi localizado, pois assim faremos com que o item seja ocultado.

Linha 9: caso o item não contenha o texto buscado (verificado na linha anterior), ele é então ocultado. Isso é feito definindo sua propriedade CSS display como “none”.

A seguir temos um exemplo de filtro realizado digitando-se as letras “ar” no input. Nota-se que os itens “Feijão” e “Arroz” foram ocultados por não conter esse texto.

Exemplo de filtro

Figura 2: Exemplo de filtro

Observa-se, porém, que o item “Arroz” contém sim as letras “ar”, mas com o “A” maiúsculo. O filtro está considerando a diferença entre letras maiúsculas e minúsculas, o que em muitos casos pode não ser interessante. Isso pode ser facilmente contornado convertendo ambos os lados da comparação (o texto do item e o texto buscado) para maiúsculo ou minúsculo.

A seguir temos as duas linhas centrais da Listagem 2 modificadas para implementar um filtro “case insensitive”, ou seja, sem diferenciar maiúsculas de minúsculas. Foi utilizada, para isso, a função toUpperCase da Javascript para converter tudo para maiúsculo. O mesmo resultado seria obtido utilizando a função toLowerCase, que converte tudo para minúsculo.

Listagem 3: Modificação no filtro para torná-lo case insensitive

if($(this).text().toUpperCase().indexOf(texto.toUpperCase()) < 0)
   $(this).css("display", "none");

Agora, digitando novamente as letras “ar”, apenas o item “Feijão” é ocultado por realmente não conter esse texto, como se vê na Figura 3.

Filtro case insensitive

Figura 3: Filtro case insensitive

Conclusão

Vimos que implementar um filtro sobre uma lista é consideravelmente simples quando utilizamos os recursos da biblioteca jQuery. O desempenho do filtro também é satisfatório, pois ele é realizado do lado cliente, utilizando os recursos do browser, sem requisições ao servidor.

Obviamente o código apresentado aqui é útil quando se tem uma lista previamente montada e exibida na página, pois caso fosse necessário realizar consulta a um banco de dados, Javascript não seria o bastante.

Caso surjam dúvidas a respeito do conteúdo aqui apresentado, a seção de comentários, abaixo, está aberta.

Até o próximo artigo.